<template>
	<view class="search-cls">
		<uni-search-bar @clear="clearHandler" cancelButton="none" v-model="query" @confirm="search" @input="input" placeholder="投票标题"
			maxlength="30"></uni-search-bar>
	</view>
	<mescroll-body @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
		<view class="news-li" v-for="vote in dataList" :key="vote.id" @click="goHandler(vote)">
			<image src="../../static/image/text.png" mode="" v-if="vote.type==1"></image>
			<image src="../../static/image/pic.png" mode="" v-if="vote.type==2"></image>
			<view class="text-cls">
				<view class="title-cls ellipsis">{{vote.title}}</view>
				<block v-if="vote.tvoteDetailList.length">
					<view class="close-cls">已投票</view>
				</block>
				<block v-else>
					<view class="now-cls" v-if='compareDateTime(vote.voteEndTime)'>{{'进行时'}}</view>
					<view class="close-cls" v-else>已结束</view>
				</block>
			</view>
		</view>
	</mescroll-body>
	<!-- <uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
		:direction="direction" @trigger="trigger" /> -->
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	import {
		listOfUser
	} from '@/api/vote.js'
	import {
		compareDateTime
	} from '@/utils/index.js'
	import {
		useRouter
	} from '@/utils/index.js'

	const pattern = ref({
		color: '#7A7E83',
		backgroundColor: '#fff',
		selectedColor: '#007AFF',
		buttonColor: '#007AFF',
		iconColor: '#fff'
	})
	const horizontal = ref('right')
	const vertical = ref('bottom')
	const direction = ref('vertical')
	const content = ref([{
			iconPath: '/static/image/vote_text.png',
			selectedIconPath: '/static/vote_text_select.png',
			text: '文字',
			active: false
		},
		{
			iconPath: '/static/image/vote_pic.png',
			selectedIconPath: '/static/vote_pic_select.png',
			text: '图文',
			active: false
		},
	])
	const dataList = ref([]) // 数据列表
	const query = ref("")
	const queryForm = ref({
		pageNum: 1,
		pageSize: 10,
	});
	const goHandler = (vote) => {
		uni.$emit("getVoteDetailList", vote.tvoteDetailList)
		let obj = {
			id: vote.id,
			list: vote.tvoteDetailList,
			type: 2
		}
		useRouter(`/pages/customvoting/customvoting?item=${encodeURIComponent(JSON.stringify(obj))}`)

	}
	const trigger = (e) => {
		console.log(e.index)
		if (e.index == 0) {
			useRouter('/pages/createWordVote/createWordVote', {
				type: 1
			})
		}
		if (e.index == 1) {
			useRouter('/pages/createPicVote/createPicVote', {
				type: 2
			})
		}
	}

	const search = (e) => {
		listOfUser({
			pageNum: 1,
			pageSize: 10,
			query: e.value
		}).then(data => {
			dataList.value = data.list
		}).catch(() => {})
	}
	const input = (e) => {
		console.log('e', e)
	}
	const clearHandler = () => {
		listOfUser({
			pageNum: 1,
			pageSize: 10,
			query: ''
		}).then(data => {
			dataList.value = data.list
		}).catch(() => {})
	}
	const {
		mescrollInit
	} = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
	const downOption = {
		auto: false //是否在初始化后,自动执行downCallback; 默认true
	}

	/* 自定义下拉刷新的回调,不使用useMescroll的downCallback */
	const downCallback = (mescroll) => {
		mescroll.setPageNum(1);
		mescroll.setPageSize(10);
		let pageSize = mescroll.size;
		listOfUser({
			pageNum: 1,
			pageSize,
			query: query.value
		}).then(data => {
			mescroll.endSuccess();
			dataList.value = data.list
		}).catch(() => {
			mescroll.endErr();
		})
	}

	/*上拉加载的回调: 其中mescroll.num:当前页 从1开始, mescroll.size:每页数据条数,默认10 */
	const upCallback = (mescroll) => {
		let pageNum = mescroll.num == 0 ? 1 : mescroll.num; // 页码, 默认从1开始
		let pageSize = mescroll.size;
		if (mescroll.num == 1) dataList.value = []; //如果是第一页需手动置空列表
		listOfUser({
			pageNum,
			pageSize,
			query: query.value
		}).then(curPageData => {
			dataList.value = dataList.value.concat(curPageData.list); // 追加数据
			mescroll.endBySize(curPageData.list.length, curPageData.total); // 请求成功, 结束加载
		}).catch(() => {
			mescroll.endErr(); // 请求失败, 结束加载
		})
	}
</script>

<style scoped lang="less">
	.search-cls {
		background-color: #fff;
	}

	.news-li {
		margin: 40rpx;
		background-color: #fff;
		height: 180rpx;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 10px;
		display: flex;
		align-items: center;

		image {
			width: 100rpx;
			height: 100rpx;
			margin-right: 30rpx;
		}

		.text-cls {
			width: calc(100% - 130rpx);

			.title-cls {
				font-size: 24px;
				font-weight: bold;
				margin-bottom: 4px;
			}

			.now-cls {
				color: blue;
				font-size: 13px;
			}

			.close-cls {
				color: gray;
				font-size: 13px;
			}
		}


	}
</style>